<template>
  <view class="restaurant-detail-page">
    <common-header
      :isCanBack="true"
      titleName=" "
      :className="headerClassName"
    ></common-header>
    <view class="container" v-if="detail.id">
      <view class="top_swiper">
        <swiper class="swiper">
          <swiper-item v-for="(item, index) in swiperTopList" :key="index" @change="changeAct">
            <view class="swiper-item">
              <image :src="img_baseUrl + item.url"></image>
            </view>
          </swiper-item>
        </swiper>
		<view class="swiper_dots">
			<view><text class="dot_now">{{showDot}}</text>/{{swiperTopList.length}}</view>
		</view>
      </view>
      <view class="detail_wrap">
        <view class="titBox">
          <view class="titBox_lf">
            <view class="name">{{ detail.name }}</view>
            <view class="tit_item">
              <text
                v-for="(item, index) in detail.featureArray"
                :key="index"
                >{{ item }}</text
              >
            </view>
          </view>
          <!-- <view class="titBox_rt" :style="{backgroundImage: `url(${img_baseUrl}/statics/std/static/recom.png)`}">
            <text>{{ detail.recValue }}</text>
          </view> -->
        </view>
        <view class="locBox_wrap">
          <view class="locBox" :style="{backgroundImage: `url(${img_baseUrl}/statics/std/static/introduction-detail-position-bg.png)`}">
            <view class="locBox_lf">
              <text>{{ detail.address?detail.address:"" }}</text>
              <view>{{ currDistance }}</view>
            </view>
            <view class="locBox_rt" @click="goToMap">
              <img :src="`${img_baseUrl}/statics/std/static/new/introduction-detail-position-location.png`" alt=""/>
              <!-- <text>去这里</text> -->
            </view>
          </view>
          <view class="phoneBox" @click.stop="callNiMa">
            <text>联系商家</text>
            <view class="phone">
              <text>拨打</text>
              <image :src="`${img_baseUrl}/statics/std/static/new/phone.png`" />
            </view>
          </view>
        </view>
        <view class="tabCon">
          <view class="sub">
            <view
              class="item"
              :class="{ active: item.dictValue == menuIndex }"
              v-for="item in menuData"
              @click="changeTab(item)"
              :key="item.dictValue"
              >{{ item.dictLabel }}</view
            >
          </view>
        </view>

        <view class="lists">
          <view
            class="con_item"
            v-for="item in menuAllData"
            :key="item.id"
            @click.stop="openPopup(item)"
          >
            <view class="item_lf_img">
              <image :src="img_baseUrl + item.imgAbbrev" />
            </view>
            <view class="item_rt">
              <view class="dish-name">{{ item.name }}</view>
              <view class="item_rt_mid">
				  <view v-if="item.feature">
					  <text v-for="(i, index) in item.feature.split('@@')" :key='index'>{{ i }}</text>
				  </view>
              </view>
              <view class="price_con">
                <image :src="`${img_baseUrl}/statics/std/static/price.png`" alt="" />
                <text class="price">{{ (item.price/100).toFixed(2) }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="res_det">餐厅详情</view>
      <view class="description">
        <mp-html :content="description" style="font-size: 28rpx; color: #4d4d4d; line-height: 48rpx; font-weight: 400;"/>
      </view>
    </view>

    <!--      菜品详情弹框-->
    <uni-popup
      ref="popup"
      type="bottom"
      :backgroundColor="'#ffffff'"
      :transStyle="{
        borderTopLeftRadius: '40rpx',
        borderTopRightRadius: '40rpx',
        overflow: 'hidden',
      }"
    >
      <view class="popup-content">
        <image
          class="popup-close"
          :src="`${img_baseUrl}/statics/std/static/delete2.png`"
          @click="closePopup"
        ></image>
        <view class="dishes-detail">
          <swiper class="detail-banner-swiper" >
            <swiper-item v-for="img of dishes.imgDetails" :key="img.attaId">
              <image
                class="banner-item"
                :src="img_baseUrl + img.url"
                mode="aspectFill"
              />
            </swiper-item>
          </swiper>
          <view style="padding: 32rpx">
            <view class="dishes-top">
              <view class="dish-name">{{ dishes.name }}</view>
              <view class="dish-tags">
              <view class="tag_item" v-if='dishes.feature'>
                <text v-for='(item, index) in dishes.feature !== "" && dishes.feature ? dishes.feature.split("@@") : []'>{{ item }}</text>
              </view>
              </view>
              <view class="price_con">
                <image :src="`${img_baseUrl}/statics/std/static/price.png`" alt="" />
                <text class="price">{{ (dishes.price/100).toFixed(2) }}</text>
              </view>
            </view>
            <view class="dish-info">
              <view class="title">餐品详情</view>
              <mp-html :content="dishes.content" />
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import commonHeader from "@/components/commonHeader.vue";
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html";
import { requestGet } from "@/utils/request";
import {currentPosition, distance} from '@/utils/index.js';

export default {
  components: {
    commonHeader,
    mpHtml,
  },
  data() {
    return {
      img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
      id: "",
      headerClassName: "",
      detail: {},
      activeTag: 0,
      menuData: [],
      menuIndex: 0, //默认选中第一个菜单
      menuAllData: [], //餐饮列表
      dishes: {}, //单个菜品详情
      currDistance: "",
	  showDot: 1
    };
  },
  onLoad(options) {
    this.id = options.id;
    if (this.id) {
      this.getDetail();
      this.getRestaurantMenuDict();
    }
  },
  computed: {
    swiperTopList() {
      return this.detail.imgDetails || [];
    },
    description() {
      return this.detail.content ? this.detail.content.split("\t").join("&nbsp;&nbsp;&nbsp;&nbsp;") : '';
    }
  },
  methods: {
	  changeAct(e) {
	  	this.showDot = e.detail.current
	  },
    // 查询餐饮详情
    getDetail() {
      requestGet(`/shop/mobile/restaurant/${this.id}`, {}).then((res) => {
        if (res.code === 200) {
          this.detail = res.data;
          const recValue = (+res.data.recValue)?.toFixed(1);
          this.detail.recValue = recValue;
          let featureArray = this.detail.feature && this.detail.feature !== '' ? this.detail.feature?.split("@@") : [];
          this.detail.featureArray = featureArray;
          this.getDistance();
        }
      });
    },
    // 查询餐饮菜品列表
    getRestaurantMenuDict() {
      requestGet(`/shop/mobile/restaurant/menu/searchType/${this.id}`, {}).then((res) => {
        if (res.code === 200) {
          res.data.forEach((item) => {
            item.dictValue = item.id;
            item.dictLabel = item.typeName;
          });
          this.menuData = res.data || [];
          if(this.menuData.length > 0){
            this.menuIndex = this.menuData[0].dictValue;
            this.getRestaurantMenu();
          }
        }
      });
    },
    // 查询餐饮列表
    getRestaurantMenu() {
      requestGet(`/shop/mobile/restaurant/menu/list`, {
        restaurantId: this.id,
        typeId: this.menuIndex,
      }).then((res) => {
        if (res.code === 200) {
          this.menuAllData = res.rows || [];
        }
      });
    },
    // 查询餐饮菜品详情
    getRestaurantMenuDetail(id) {
      requestGet(`/shop/mobile/restaurant/menu/${id}`, {
        id,
      }).then((res) => {
        if (res.code === 200) {
          res.data.content = res.data && res.data.content ? res.data.content.split("\t").join("&nbsp;&nbsp;&nbsp;&nbsp;") : '';
          this.dishes = res.data || {};
        }
      });
    },
    changeTab(item) {
      this.menuIndex = item.dictValue;
      this.getRestaurantMenu();
    },
    onPageScroll(e) {
      if (e.scrollTop > 100) {
        this.headerClassName = "headerClass";
      } else {
        this.headerClassName = "";
      }
    },
    // 拨打电话
    callNiMa() {
      if (!this.detail.phone) {
        uni.showToast({
          title: "暂无联系电话",
          icon: "none",
        });
        return;
      }
      uni.makePhoneCall({
        phoneNumber: this.detail.phone, //仅为示例
      });
    },
    openPopup(item) {
      this.$refs.popup.open();
      this.getRestaurantMenuDetail(item.id);
    },
    closePopup() {
      this.$refs.popup.close();
    },
    goToMap(){
      if(!this.detail.latitude || !this.detail.longitude || this.detail.latitude == "" || this.detail.longitude == ''){
        uni.showToast({
          title: "暂无具体位置信息",
          icon: "none",
        });
        return 
      }
      const detail = this.detail;
      uni.openLocation({
      			latitude: Number(detail.latitude),
      			longitude: Number(detail.longitude),
            name: detail.name || '',
            address: detail.address || '',
      			success: function () {
      				console.log('openLocation=======success',detail);
      			},
            fail: function (res) {
              console.log('openLocation=====fail', res);
            }
      		});
    },
    async getDistance(){
       let myPosition = null;
       try {
         myPosition = await currentPosition();
       } catch (error) {
         console.log('定位失败:', error);
         return
       }
      console.log('myPositon=====', myPosition);
      if(myPosition.latitude && myPosition.longitude && this.detail.latitude && this.detail.longitude){
        distance(myPosition.latitude, myPosition.longitude,this.detail.latitude,this.detail.longitude).then(distance => {
          console.log("distance========", distance)
          this.currDistance = Number(distance) > 1000 ? (Number(distance)/1000).toFixed(2) + 'km' : distance + 'm';
        }).catch(err => {
          console.log("distance========err", res)
          this.currDistance = "";
        })
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.restaurant-detail-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #ffffff;

  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .top_swiper {
      position: relative;
	  .swiper_dots {
		  position: absolute;
		  bottom: 60rpx;
		  right: 32rpx;
		  background: rgba(0,0,0,0.6);
		  border-radius: 24rpx 24rpx 24rpx 24rpx;
		  view {
			  box-sizing: border-box;
			  padding: 4rpx 16rpx;
			  font-size: 24rpx;
			  font-weight: 400;
			  color: rgba(255,255,255,0.8);
			  line-height: 32rpx;
		  }
		  .now {
			  color: #FFFFFF;
		  }
	  }
      swiper.swiper {
        height: 436rpx;

        &::v-deep {
          .wx-swiper-dots {
            width: 100%;
            height: 120rpx;
            background: linear-gradient(
              180deg,
              rgba(0, 0, 0, 0) 0%,
              rgba(0, 0, 0, 0.16) 100%
            );
            padding-top: 52rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            bottom: 0;
          }

          .wx-swiper-dot {
            width: 20rpx;
            height: 4rpx;
            margin: 0 6rpx;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 10rpx;
            opacity: 1;

            &.wx-swiper-dot-active {
              background: #ffffff;
              opacity: 1;
            }
          }
        }
      }
      .swiper-item {
        display: block;
        height: 100%;
        width: 100%;
        line-height: 300rpx;
        text-align: center;

        image {
          display: block;
          height: 100%;
          width: 100%;
        }
      }
    }

    .detail_wrap {
      box-sizing: border-box;
      padding: 40rpx 32rpx 0;
      border-radius: 40rpx 40rpx 0rpx 0rpx;
      transform: translateY(-40rpx);
      background: #fff;

      .titBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 34rpx;

        .titBox_lf {
          flex: 1;
          margin-right: 58rpx;
          .name {
            font-size: 40rpx;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.9);
            line-height: 56rpx;
          }

          .tit_item {
            margin-top: 16rpx;
            text {
              display: inline-block;
              box-sizing: border-box;
              padding: 4rpx 12rpx;
              height: 40rpx;
			  background: rgba(252,211,149,0.9);
              border-radius: 8rpx 8rpx 8rpx 8rpx;
              font-size: 24rpx;
              font-weight: 400;
              color: #60391A;
              line-height: 32rpx;
              margin-right: 12rpx;
              margin-bottom: 12rpx;
            }
          }
        }

        .titBox_rt {
          width: 108rpx;
          height: 108rpx;
          // background: url("https://ltjtjingquguanli.com/statics/std/static/recom.png") no-repeat;
          background-size: cover;
          font-size: 36rpx;
          font-family: D-DIN-Bold, D-DIN;
          font-weight: 700;
          color: #2187ff;
          line-height: 40rpx;
          box-sizing: border-box;
          padding-top: 16rpx;
		  display: flex;
		  justify-content: center;
        }
      }

      .locBox_wrap {
        width: 100%;
        display: flex;
      }

      .phoneBox {
        margin-left: 14rpx;
        box-sizing: border-box;
        padding: 24rpx 20rpx 0;
        width: 180rpx;
        height: 120rpx;
        background: linear-gradient(
          135deg,
          #edeff1 0%,
          #edeef1 36%,
          rgba(237, 238, 241, 0.72) 56%,
          rgba(237, 239, 241, 0.8) 100%
        );
        border-radius: 24rpx 24rpx 24rpx 24rpx;

        text {
          font-size: 28rpx;
          font-weight: 500;
          color: #5f6f86;
          line-height: 44rpx;
        }

        .phone {
          display: flex;
          align-items: center;

          text {
            font-size: 24rpx;
            font-weight: 400;
            color: #3FAA73;
            line-height: 40rpx;
          }

          image {
            width: 32rpx;
            height: 32rpx;
            display: flex;
            margin-left: 8rpx;
          }
        }
      }

      .locBox {
        width: calc(100% - 194rpx);
        height: 120rpx;
        border-radius: 24rpx;
        // background: url("https://ltjtjingquguanli.com/statics/std/static/introduction-detail-position-bg.png");
        background-size: cover;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 20rpx 24rpx 16rpx;

        .locBox_lf {
          margin-right: 20rpx;
          flex: 1;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;

          text {
            font-size: 28rpx;
            font-weight: 500;
            color: #5f6f86;
            line-height: 44rpx;
          }

          view {
            font-size: 24rpx;
            font-weight: 400;
            color: #777f8f;
            line-height: 40rpx;
          }
        }

        .locBox_rt {
          width: 64rpx;
          height: 64rpx;
          background: #ffffff;
          border-radius: 36rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          image {
            width: 32rpx;
            height: 32rpx;
            display: block;
          }

          text {
            font-size: 28rpx;
            font-weight: 400;
            color: #2187ff;
            line-height: 32rpx;
          }
        }
      }

      .tabCon {
        width: 100%;
        overflow-x: scroll;
        margin: 48rpx 0;

        &::-webkit-scrollbar {
          display: none;
        }

        .sub {
          display: flex;
          flex-wrap: nowrap;
          margin-bottom: 16rpx;

          .item {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 56rpx;
			background: #F3F6F5;
            border-radius: 28rpx;
            box-sizing: border-box;
            padding: 8rpx 16rpx;
            border: 2rpx solid #B7CABF;
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.7);
            margin-right: 16rpx;
            white-space: nowrap;
            &.active {
				background: #F3F6F5;
              border: 2rpx solid #3FAA73;
              color: #3FAA73;
            }
          }
        }
      }

      .lists {
        width: 100%;

        .con_item {
          width: 100%;
          height: 160rpx;
          display: flex;
          margin-bottom: 48rpx;

          .item_lf_img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 16rpx;
            overflow: hidden;

            image {
              width: 100%;
              height: 100%;
              display: block;
            }
          }

          .item_rt {
            width: calc(100% - 160rpx - 24rpx);
            margin-left: 24rpx;
            display: flex;
            flex-direction: column;

            .dish-name {
              font-size: 32rpx;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.8);
              line-height: 44rpx;
            }

            .item_rt_mid {
              margin-top: 12rpx;
			  height: 40rpx;
              text {
                box-sizing: border-box;
                padding: 4rpx 12rpx;
                height: 100%;
                background: #F3F6F5;
                border-radius: 8rpx 8rpx 8rpx 8rpx;
                font-size: 24rpx;
                font-weight: 400;
                color: #87A198;
                line-height: 32rpx;
                margin-right: 12rpx;
              }
            }

            .price_con {
              display: flex;
              align-items: center;
              margin-top: 28rpx;

              image {
                width: 32rpx;
                height: 32rpx;
                display: block;
              }

              text {
                height: 44rpx;
                font-size: 40rpx;
                font-family: D-DIN-Bold, D-DIN;
                font-weight: 700;
                color: #ff7614;
                line-height: 44rpx;
              }
            }
          }
        }
      }
    }

    .res_det {
      width: 100vw;
      border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
      font-size: 32rpx;
      font-weight: 700;
      color: #3d3d3d;
      line-height: 44rpx;
      box-sizing: border-box;
      padding: 14rpx 0 14rpx 32rpx;
      // background: url("https://ltjtjingquguanli.com/statics/std/static/my_icon7.png") no-repeat;
	  background-size: 100rpx 100rpx;
	  background-position: 8rpx -14rpx;
    }

    .description {
      width: 100%;
      height: auto;
      box-sizing: border-box;
      padding: 24rpx;
    }
  }

  .popup-content {
    max-height: 80vh;
    position: relative;

    .popup-close {
      width: 48rpx;
      height: 48rpx;
      position: absolute;
      right: 24rpx;
      top: 24rpx;
      z-index: 1;
    }

    swiper.detail-banner-swiper {
      height: 360rpx;

      &::v-deep {
        .wx-swiper-dots {
          width: 100%;
          height: 120rpx;
          background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.16) 100%
          );
          padding-top: 52rpx;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          bottom: 0;
        }

        .wx-swiper-dot {
          width: 20rpx;
          height: 4rpx;
          margin: 0 6rpx;
          background: rgba(255, 255, 255, 0.6);
          border-radius: 10rpx;
          opacity: 1;

          &.wx-swiper-dot-active {
            background: #ffffff;
            opacity: 1;
          }
        }
      }
    }

    .banner-item {
      width: 100%;
      height: 100%;
      display: block;
    }
    .dishes-top {
      .dish-name {
        font-size: 40rpx;
        font-family: Alibaba PuHuiTi 2-75 SemiBold, Alibaba PuHuiTi 20;
        font-weight: 700;
        color: #3d3d3d;
        line-height: 56rpx;
      }
      .dish-tags {
        margin-top: 8rpx;
		.tag_item {
			text {
			  box-sizing: border-box;
			  padding: 4rpx 12rpx;
			  height: 40rpx;
			  background: #F3F6F5;
			  border-radius: 8rpx 8rpx 8rpx 8rpx;
			  font-size: 24rpx;
			  font-weight: 400;
			  color: #87A198;
			  line-height: 32rpx;
			  margin-right: 12rpx;
			}
		}
      }

      .price_con {
        display: flex;
        align-items: center;
        margin-top: 28rpx;

        image {
          width: 32rpx;
          height: 32rpx;
          display: block;
        }

        text {
          height: 44rpx;
          font-size: 40rpx;
          font-family: D-DIN-Bold, D-DIN;
          font-weight: 700;
          color: #ff7614;
          line-height: 44rpx;
        }
      }
    }

    .dish-info {
      margin-top: 48rpx;
    }
  }
}
</style>
